<!-- 人员类 -->
<template>
  <div class="personnel">
    <el-row>
      <el-col :span="6">
        <div :style="{ height: heightCard }">
          <!-- 人员类 -->
          <div class="person">
            <el-tree
              ref="tree"
              :data="tagGroups"
              node-key="id"
              @node-click="handleNodeClick"
              :default-expand-all="false"
              :props="defaultProps"
              :expand-on-click-node="true"
            >
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col
        :span="18"
        style="overflow-y: scroll"
        :style="{ height: heightCard }"
      >
        <el-card class="box-card" style="height: 500px; overflow-y: scroll">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 20px 20px 10px 20px;
            "
          >
            <h4>标签定义:</h4>
          </div>
          <div style="padding: 0 20px 0 20px">
            <vxe-table
              border
              ref="xTable"
              :resizable="true"
              :align="allAlign"
              :data="tags"
              :height="heightTableTag"
              :scroll-y="{ enabled: false }"
              highlight-current-row
              @current-change="handleTagClick"
            >
              <vxe-column title="序号" type="seq" width="80"></vxe-column>
              <vxe-column
                title="法人单位标识"
                field="tagName"
                width="200"
              ></vxe-column>
              <vxe-column
                title="机构名称"
                field="tagName"
                width="300"
              ></vxe-column>
              <vxe-column
                title="机构简称"
                field="tagName"
                width="150"
              ></vxe-column>
              <vxe-column
                title="隶属关系"
                field="tagName"
                width="150"
              ></vxe-column>
              <vxe-column
                title="机构级别"
                field="tagName"
                width="150"
              ></vxe-column>
              <vxe-column
                title="机构类别"
                field="tagCode"
                width="150"
              ></vxe-column>
              <vxe-column title="所在政区" field="tagSort" width="200"></vxe-column>
            </vxe-table>
            <!-- 标签定义分页 -->
            <vxe-pager
              style="margin-top: 10px"
              background
              align="rigth"
              :current-page.sync="currentPage"
              :page-size.sync="perPage"
              :total="totalItems"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]"
              @page-change="handleSizeChange"
            >
            </vxe-pager>
          </div>
        </el-card>
        <el-card class="box-card" :style="{ height: heightCard }">
          <div style="display: flex; justify-content: end; padding: 10px"></div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 20px;
            "
          >
            <div style="display: flex; align-items: center">
              <h4>人员表:</h4>
              <el-input
                size="medium"
                placeholder="请输入姓名"
                v-model="personName"
                clearable
                style="width: 200px; margin-left: 10px"
              />
              <el-input
                size="medium"
                placeholder="请输入身份证号"
                v-model="idCard"
                clearable
                style="width: 200px; margin-left: 10px"
              />
              <el-button
                size="medium"
                style="margin-left: 10px"
                type="primary"
                @click="getResourceList"
                >查询</el-button
              >
            </div>
            <el-button
              size="medium"
              type="danger"
              plain
              @click="handleClickTableDel()"
            >
              删除
            </el-button>
          </div>
          <div style="padding: 0 20px 0 20px">
            <vxe-table
              border
              ref="xTable"
              :resizable="true"
              :align="allAlign"
              :data="tableData"
              :height="heightTable"
              :scroll-y="{ enabled: false }"
              style="width: 100%"
              highlight-current-row
              @checkbox-all="handleAllSelectChang"
              @checkbox-change="handleSelectChange"
            >
              <!-- show-overflow -->
              <vxe-column type="checkbox" width="80"></vxe-column>
              <vxe-column
                type="html"
                title="姓名"
                field="NAME"
                :formatter="formatName"
                width="200"
              ></vxe-column>
              <vxe-column
                title="身份证号"
                width="300"
                field="idCard"
              ></vxe-column>
              <vxe-column
                align="left"
                title="工作单位及职务"
                field="jobShort"
                width="750"
              ></vxe-column>
            </vxe-table>
            <vxe-pager
              style="margin-top: 10px"
              background
              align="rigth"
              :current-page.sync="currentPageTwo"
              :page-size.sync="perPageTwo"
              :total="totalItemsTwo"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]"
              @page-change="handleSizeChangeTwo"
            >
            </vxe-pager>
          </div>
        </el-card>
        <personRmb ref="dialogPersonRmb" @onClosed="onClosed"></personRmb>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  consultList,
  tagResourceList,
  tagResourceDelete,
} from "@/api/students/organization/consult";
import store from "@/store";
import personRmb from "./componentsConsult/personRmbNewTag";
export default {
  components: { personRmb },
  data() {
    return {
      categories: [],
      heightTableTag: window.innerHeight - 600 + "px",
      defaultProps: {
        children: "children",
        label: "tagName",
      },
      currentPage: 1,
      totalItems: 0,
      perPage: 20,
      allAlign: "center",
      groupData: null,
      tagGroups: [],
      tagsClickList: null,
      heightCard: window.innerHeight - 132 + "px",
      heightTable: window.innerHeight - 360 + "px",
      tags: [],
      tagsRow: null,
      tableData: [],
      selectedGroupIndex: 0,
      selectedCategoryIndex: 0,
      selectTagsIndex: 0,
      multipleSelection: [],
      selectedRows: [],
      currentPageTwo: 1,
      totalItemsTwo: 0,
      perPageTwo: 20,
      idCard: "",
      personName: "",
    };
  },
  created() {
    this.getConsultList();
    let _this = this;
    window.checkPerson = _this.checkPerson;
  },
  methods: {
    getConsultList() {
      const params = {
        userId: store.getters.user_id.toString(),
        userName: store.getters.userName.toString(),
        token: store.getters.token.toString(),
        parentId: "A",
        tagGroupId: "A",
        tagType: "2",
      };
      consultList(params).then((result) => {
        this.tagGroups = result.resultdata.data;
        if (this.tagGroups.length > 0) {
          this.getGroupData(this.tagGroups[0], 0); // 获取第一条标签分组数据
        }
      });
    },
    // 分组数据
    getGroupData(groupData) {
      this.groupData = groupData;
      const params = {
        userId: store.getters.user_id.toString(),
        userName: store.getters.userName.toString(),
        token: store.getters.token.toString(),
        parentId: this.groupData.id,
        tagGroupId: "A",
        tagType: "2",
      };
      consultList(params).then((result) => {
        // 分类
        this.categories = result.resultdata.data;
        console.log(this.categories, "categories");
      });
    },
    handleNodeClick(data) {
      this.handleCategoryClick(data);
    },
    //定义数据
    handleCategoryClick(data) {
      console.log(data, "定义数据");
      this.categoriesList = data;
      const params = {
        userId: store.getters.user_id.toString(),
        userName: store.getters.userName.toString(),
        token: store.getters.token.toString(),
        parentId: this.categoriesList.id,
        rows: this.perPage,
        page: this.currentPage,
        tagGroupId: "A",
        tagType: "3",
      };
      consultList(params).then((result) => {
        // 定义
        this.tags = result.resultdata.data;
        this.totalItems = result.resultdata.count;
      });
    },
    getTagList() {
      const params = {
        userId: store.getters.user_id.toString(),
        userName: store.getters.userName.toString(),
        token: store.getters.token.toString(),
        parentId: this.categoriesList.id,
        rows: this.perPage,
        page: this.currentPage,
        tagGroupId: "A",
        tagType: "3",
      };
      consultList(params).then((result) => {
        // 定义
        this.tags = result.resultdata.data;
        this.totalItems = result.resultdata.count;
      });
    },
    handleSizeChange({ currentPage, pageSize }) {
      console.log(currentPage, pageSize, "212eee");
      this.currentPage = currentPage;
      this.perPage = pageSize;
      this.getTagList();
    },
    handleTagClick(currentRow) {
      console.log(currentRow.row, "11111");
      this.tagsClickList = currentRow.row;
      this.getResourceList();
    },
    getResourceList() {
      const params = {
        userId: store.getters.user_id.toString(),
        userName: store.getters.userName.toString(),
        token: store.getters.token.toString(),
        tagDefineId: this.tagsClickList.id,
        rows: this.perPageTwo,
        page: this.currentPageTwo,
        idCard: this.idCard,
        name: this.personName,
      };
      tagResourceList(params).then((result) => {
        this.tableData = result.resultdata.data; //表格
        this.totalItemsTwo = result.resultdata.count;
      });
    },
    // 分页
    handleSizeChangeTwo({ currentPage, pageSize }) {
      console.log(currentPage, pageSize, "212eee");
      this.currentPage = currentPage;
      this.perPage = pageSize;
      this.getResourceList();
    },
    formatName({ row, rowIndex }) {
      return (
        '<a href="javascript:void(0)" style="color:#0220bf;cursor:pointer" onclick="checkPerson(\'' +
        row.personId +
        "','" +
        rowIndex +
        "','" +
        0 +
        "')\">" +
        row.NAME +
        "</a>"
      );
    },
    // 点击人员查看详情
    checkPerson(personId, index, personEdit) {
      // this.crentRowIndex = index;
      this.$refs.xTable.setCurrentRow(this.tableData[index]);
      if (personId && personId != "null") {
        this.$refs.dialogPersonRmb.initData(
          personId,
          personEdit,
          "人员修改",
          "personNew"
        );
      } else {
        this.$message.warning("打开失败（主键标识未获取到），请联系管理员！");
      }
    },
    onClosed() {
      // this.getResourceList()
    },
    handleSelectChange({ checked }) {
      this.selectedRows = [];
      this.multipleSelection = [];
      const records = this.$refs.xTable.getCheckboxRecords();
      this.selectedRows = records; // 将选中的行数据赋值给 selectedRows 数组
      console.log(this.selectedRows, "单选");
    },
    handleAllSelectChang({ checked, records }) {
      this.selectedRows = [];
      this.multipleSelection = [];
      this.multipleSelection = records;
      console.log(this.multipleSelection, "多选");
    },
    // 表格删除
    handleClickTableDel() {
      let dataList = this.selectedRows.length || this.multipleSelection.length;
      if (dataList !== 0) {
        this.$confirm("确定删除当前行?", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const params = {
            userId: store.getters.user_id.toString(),
            userName: store.getters.userName.toString(),
            token: store.getters.token.toString(),
            list: [],
          };
          if (this.selectedRows.length > 0) {
            // 如果有选中的行，则将选中的行数据放入 list 中
            params.list = this.selectedRows.map((row) => ({ ...row }));
          } else if (this.multipleSelection.length > 0) {
            // 如果没有选中的行，但有多选的行，则将多选的行数据放入 list 中
            params.list = this.multipleSelection.map((row) => ({ ...row }));
          }

          tagResourceDelete(params).then((response) => {
            if (response.result) {
              this.$message({
                type: "success",
                message: response.resultdata,
              });
              this.getConsultList();
            } else {
              this.$message({
                type: "error",
                message: response.resultdata,
              });
            }
          });
        });
      } else {
        // 如果既没有选中的行，也没有多选的行，则提示用户至少选择一行
        this.$message({
          type: "warning",
          message: "请至少勾选一条数据要删除的数据！",
        });
      }
    },
  },
};
</script>

<style scoped>
.personnel {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
>>> .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 3.354vw;
  border: 1px solid #eee;
  cursor: pointer;
}
>>> .el-tree {
  height: calc(100vh - 260px);
  overflow-y: scroll;
  margin: 10px 0 0 10px;
}
>>> .custom-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(135, 206, 235, 0.3);
}
</style>